function PageCustomers(user, sd, options) {
  this._user = user;

  this._sd = sd;
  this._options = (options) ? options : null;
  
  this._gui = { customerNew: document.getElementById('button2'),
                pagination: document.getElementById('td1'),
                customers: document.getElementById('table1'),
                search: { customer: { id: document.getElementById('input1'),
                                      name: document.getElementById('input2'),
                                      phone: document.getElementById('input3'),
                                      weddingDay: document.getElementById('input4'),
                                      dateFrom: document.getElementById('input5'),
                                      dateTo: document.getElementById('input6')
                                    },
                          orderType: { wedding: document.getElementById('input8'),
                                       prewedding: document.getElementById('input9'),
                                       protrait: document.getElementById('input10'),
                                       engagement: document.getElementById('input11'),
                                       other: document.getElementById('input12'),
                                     },
                          btnSearch: document.getElementById('button1')
                        }
              };
              
  this._popupBox = new PopupBox();
  
  this._createElements();
}

PageCustomers.prototype._createElements = function() {

  var _self = this;
  
  this._gui.customerNew.onclick = function() { location.href = '?p=pageasst&t=pagecustomer&m1=a2&m2=b2';
                                             };
  
  this._loadData();

};

PageCustomers.prototype._loadData = function() {
  var tr, td;
  tr = this._gui.customers.insertRow(-1);
  td = tr.insertCell(-1);
  td.appendChild(DOMUtils.getLoadingImage());
  
  this._customers = null;
  this._customerParams = null;
  this._retrieveCustomers(1);
};

PageCustomers.prototype._verifyData = function() {
  if (this._customers) {
    this._updateElements();
  }
};

PageCustomers.prototype._retrieveCustomers = function(page, condition) {
  var _self = this;
  new RequestUtils()._read('customer', null, (condition) ?  condition : '', page, '{{$smarty.const.SIZE|escape:'javascript'}}', null, null, function(result, params) { _self._customers = result.data;
                                                                                                                                                                       _self._customerParams = result;
                                                                                                                                                                       _self._verifyData.call(_self);
                                                                                                                                                                     }, null);
};

PageCustomers.prototype._updateElements = function() {
  var unique, _self = this;
  
  DOMUtils.removeTableRows(this._gui.customers, 1);
  DOMUtils.removeChildElements(this._gui.pagination);
  
  tr = this._gui.customers.insertRow(-1);
  td = tr.insertCell(-1);
  td.style.height = '10px'; 
   
  if (this._customers.length == 0) {
    tr = this._gui.customers.insertRow(-1);
    td = tr.insertCell(-1);
    td.style.textAlign = 'center';
    td.appendChild(document.createTextNode('Empty'));
  }

  for(var i = 0, il = this._customers.length; i < il; i++) {
    var customer = this._customers[i];
    
    unique = MiscUtils.unique();
    tr = this._gui.customers.insertRow(-1);
    new GtrCustomer(i + '_' + unique, tr, customer, {user: this._user});
    
    var gui = { customerId: document.getElementById('link' + i + '_' + unique + '1')
              };
    
    gui.customerId._customer = customer;
    gui.customerId.onclick =  function() { location.href = '?p=pageasst&t=pagecustomerold&m1=a2&m2=b1&opt=' + MiscUtils.encode(JSON.stringify({ cid: this._customer.id }));
                                         };
  }
  
  var p = document.createElement('p');
  this._gui.pagination.appendChild(p);
  Pagination.makePagedResults(p, this._customerParams.page, this._customerParams.total, this._customerParams.size, function(page) { _self._retrieveCustomers.call(_self, page); }, this, document);
  
  this._customerSearch(this._gui, function(condition) { _self._retrieveCustomers.call(_self, 1, condition); });
};

PageCustomers.prototype._customerSearch = function(gui, callbackFunc) {
  var _self = this;
  this._callbackFunc = callbackFunc;
  this._search = { id: '',
                   name: '',
                   phone: '',
                   weddingDay: null,
                   orderWedding: true,
                   orderPrewedding: true,
                   orderProtrait: true,
                   orderEngagement: true,
                   orderOther: true,
                   dateFrom: null,
                   dateTo: null,
                   showAllFinished: false
                 };
  
  gui.search.customer.id.value = this._search.id;
  gui.search.customer.id.onkeydown = function() { _self._search.id = this.value; };
  gui.search.customer.id.onchange = function() { _self._search.id = this.value; };
  
  gui.search.customer.name.value = this._search.name;
  gui.search.customer.name.onkeydown = function() { _self._search.name = this.value; };
  gui.search.customer.name.onchange = function() { _self._search.name = this.value; };
  
  gui.search.customer.phone.value = this._search.phone;
  gui.search.customer.phone.onkeydown = function() { _self._search.phone = this.value; };
  gui.search.customer.phone.onchange = function() { _self._search.phone = this.value; };
  
  gui.search.customer.weddingDay.value = (this._search.weddingDay) ? SimpleDate.format(this._search.weddingDay) : '';
  gui.search.customer.weddingDay.onclick = function() { var context = this;
                                                        _self._changeDate.call(_self, this, _self._search.weddingDay, function(sd) { _self._search.weddingDay = sd; context.focus(); }, true);
                                                        return false;
                                                      };
  
  gui.search.customer.dateFrom.value = (this._search.dateFrom) ? SimpleDate.format(this._search.dateFrom) : '';
  gui.search.customer.dateFrom.onclick = function() { var context = this;
                                                      _self._changeDate.call(_self, this, _self._search.dateFrom, function(sd) { _self._search.dateFrom = sd; context.focus(); }, false);
                                                      return false;
                                                    };
                                                      
  gui.search.customer.dateTo.value = (this._search.weddingDay) ? SimpleDate.format(this._search.weddingDay) : '';
  gui.search.customer.dateTo.onclick = function() { var context = this;
                                                    _self._changeDate.call(_self, this, _self._search.dateTo, function(sd) { _self._search.dateTo = sd; context.focus(); }, false);
                                                    return false;
                                                  };
  
  
  gui.search.orderType.wedding.defaultChecked = this._search.orderWedding;
  gui.search.orderType.wedding.onclick = function() { _self._search.orderWedding = this.checked; };
  
  gui.search.orderType.prewedding.defaultChecked = this._search.orderPrewedding;
  gui.search.orderType.prewedding.onclick = function() { _self._search.orderPrewedding = this.checked; };
  
  gui.search.orderType.protrait.defaultChecked = this._search.orderProtrait;
  gui.search.orderType.protrait.onclick = function() { _self._search.orderProtrait = this.checked; };
  
  gui.search.orderType.engagement.defaultChecked = this._search.orderEngagement;
  gui.search.orderType.engagement.onclick = function() { _self._search.orderEngagement = this.checked; };
  
  gui.search.orderType.other.defaultChecked = this._search.orderOther;
  gui.search.orderType.other.onclick = function() { _self._search.orderOther = this.checked; };
  
  gui.search.btnSearch.onclick = function() { _self._callbackFunc.call(_self, escape(_self._toString(_self._search)));
                                            };
  
};

PageCustomers.prototype._toString = function(search) {
  var str = '';
  
  str = str + '(d.bride.name LIKE \'%' + encodeURI(search.name) + '%\' OR d.groom.name LIKE \'%' + encodeURI(search.name) + '%\')';
  
  str = str + ' AND ((d.bride.phone LIKE \'%' + search.phone + '%\' OR d.groom.phone LIKE \'%' + search.phone + '%\') OR (d.bride.mobile LIKE \'%' + search.phone + '%\' OR d.groom.mobile LIKE \'%' + search.phone + '%\'))';
  
  str = str + ((search.id == '') ? '' : ' AND d.oid=\'' + (parseInt(search.id, 10)) + '\'');
  
  str = str + ((search.showAllFinished) ? '' : ' AND (d.orders.contains(o) AND o.isCompleted=0)');
  
  str = str + ((search.orderWedding) ? ' AND (d.orders.contains(o) AND o.type = \'Wedding\')' : 
               (search.orderPrewedding) ? ' AND (d.orders.contains(o) AND o.type != \'Wedding\' OR o.type = \'Prewedding\')' : 
               (search.orderProtrait) ? ' AND (d.orders.contains(o) AND o.type != \'Wedding\' OR o.type != \'Prewedding\' OR o.type = \'Protrait\')' : 
               (search.orderEngagement) ? ' AND (d.orders.contains(o) AND o.type != \'Wedding\' OR o.type != \'Prewedding\' OR o.type != \'Protrait\' OR o.type = \'Engagement\')' : 
               (search.orderOther) ? ' AND (d.orders.contains(o) AND o.type != \'Wedding\' OR o.type != \'Prewedding\' OR o.type != \'Protrait\' OR o.type != \'Engagement\' OR o.type = \'Other\')' : ''
              );
  return str;
};

PageCustomers.prototype._changeDate = function(label, currentDate, onChangeFunc, showTime) {
  var _self = this;
  this._wContainer = document.createElement('div');
  this._wContainer.style.left = DOMUtils.findPos(label)[0] + 'px';
  this._wContainer.style.top = DOMUtils.findPos(label)[1] + 'px';
  this._popupBox._open(this._wContainer, { pos: DOMUtils.findPos(label) });
  
  var ds = new DateSelect(currentDate, null, { container: this._wContainer, showTime: showTime });
  ds._selectFunc = function(sd) { _self._selectDate.call(_self, sd, label, onChangeFunc, showTime); };
};

PageCustomers.prototype._selectDate = function(sd, label, onChangeFunc, showTime) {
  
  onChangeFunc(sd);
  this._showDate(sd, label, showTime);
  this._popupBox._close();
};

PageCustomers.prototype._showDate = function(sd, label, showTime) {
  if (sd) { 
    label.value = SimpleDate.format(sd, showTime);
  } else {
    label.value = '';
  }
};
